/* 1920的主页 */
.home-page {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.transition-com {
  transition: all 0.5s;
}

.page-title {
  position: absolute;
  left: 15%;
  top: 30%;
  z-index: 5;
}

.page-title > .transition-title {
  width: 550px;
  height: 220px;
}

.page-egg {
  position: absolute;
  right: -7%;
  top: -25%;
  width: 190px;
  height: 194px;
  z-index: 5;
}

.transition-bottom {
  animation: slide-in-bottom 3s linear 1s 1 normal none;
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.transition-title {
  animation: slide-in-right 3s linear 0s 1 normal none;
}
@keyframes slide-in-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.transition-left {
  animation: slide-in-left 3s linear 0s 1 normal none;
}
@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.transition-top {
  animation: slide-in-top 3s linear 0s 1 normal none;
}
@keyframes slide-in-top {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.cloud {
  position: absolute;
  background: url("https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/cloud.png")
    no-repeat;
  background-size: cover;
}

.cloud-l {
  width: 90px;
  height: 60px;
  left: 280px;
  top: 204px;
}

.cloud-m {
  width: 192px;
  height: 128px;
  right: 510px;
  top: 192px;
}

.cloud-r {
  width: 90px;
  height: 60px;
  right: 380px;
  top: 132px;
}

.floor {
  position: absolute;
  width: 1130px;
  height: 600px;
  right: -400px;
  bottom: 130px;
  background: url("https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/floor.png")
    100% no-repeat;
}

.wave {
  width: 330px;
  height: 462px;
  bottom: -200px;
  left: 23px;
}

.right-corner {
  position: absolute;
  bottom: 2%;
  left: 23px;
  display: flex;
  justify-content: space-between;
  z-index: 1000;
}
.right-corner > p {
  cursor: pointer;
  white-space: noWrap;
  margin-left: 10px;
}
.icon-size {
  width: 12px;
  height: 12px;
}

.wave::before {
  content: "";
  width: 271px;
  height: 398px;
  top: 60px;
  left: 221px;
}

.wave::after {
  content: "";
  width: 451px;
  height: 530px;
  top: -182px;
  right: 213px;
}

.wave,
.wave::before,
.wave::after {
  position: absolute;
  border-radius: 100%;
  transition: all 0.5s;
  background: #ffd8b8;
  z-index: 2;
}

.page-slogan {
  position: absolute;
  left: 50%;
  bottom: 10%;
  cursor: pointer;
  margin-left: -15%;
}

.main-topic {
  width: 40%;
  height: 55%;
  bottom: 0;
  left: 55%;
  z-index: 4;
  position: fixed;
}

.target {
  position: absolute;
  width: 160px;
  height: 160px;
  z-index: 4;
  transition: all 0.3s;
}

.target img {
  width: 100%;
  height: 100%;
}

.target .target-name {
  display: none;
  text-align: center;
}

.target-student {
  left: 0;
  top: 28%;
  cursor: pointer;
}
.student {
  width: 9vw !important;
  height: 8vw !important;
  object-fit: cover;
}

.target-single {
  left: 9vw;
  top: 0;
  width: 166px;
  height: 164px;
  cursor: pointer;
}

.target-couple {
  left: 18vw;
  top: 23%;
  width: 150px;
  height: 142px;
  cursor: pointer;
}

.target-infecund {
  left: 26vw;
  top: -5%;
  width: 150px;
  height: 126px;
  cursor: pointer;
}

.cricle {
  position: absolute;
  border-radius: 100%;
  transition: all 0.5s;
}

.cricle-l {
  width: 874px;
  height: 1158px;
  background: #fff;
  bottom: -656px;
  right: 0;
  z-index: 1;
}

.cricle-r {
  width: 330px;
  height: 462px;
  background: #ffb282;
  bottom: -200px;
  right: -160px;
  opacity: 0.4;
  z-index: 2;
}

.main-topic:hover .cricle-l {
  width: 874px;
  height: 1200px;
  background: #fff;
  z-index: 1;
  transition: all 0.3s;
}

.target-student:hover {
  transform: scale(1.3);
  transition: all 0.4s ease 0s;
  -webkit-transform: scale(1.3);
}

.target-single:hover {
  transform: scale(1.3);
  transition: all 0.4s ease 0s;
  -webkit-transform: scale(1.3);
}
.target-couple:hover {
  transform: scale(1.3);
  transition: all 0.4s ease 0s;
  -webkit-transform: scale(1.3);
}

.target-infecund:hover {
  transform: scale(1.3);
  transition: all 0.4s ease 0s;
  -webkit-transform: scale(1.3);
}

.foot {
  position: absolute;
  z-index: 5;
  width: 2834px;
  height: 262px;
  bottom: -180px;
  left: -386px;
  background: url("https://gongyuuxuan.oss-cn-beijing.aliyuncs.com/bottom%20white%20bar.png")
    no-repeat;
  background-size: cover;
}

/* 1920的副页 */
.home-page-sub {
  z-index: 10;
  background: #fff2dc;
}
.home-page-sub .menu-bg,
.home-page-sub .page-slogan {
  display: none;
}

.home-page-sub .wave::before {
  width: 330px;
}

.home-page-sub .wave::after {
  width: 1300px;
}

.home-page-sub .cricle-l {
  width: 1650px;
  right: -300px;
  opacity: 0.9;
}

.home-page-sub .cricle-r {
  width: 400px;
  height: 420px;
  right: -304px;
}

.home-page-sub .floor {
  right: -700px;
}

.home-page-sub .transition-title {
  width: 172px;
  height: 84px;
  top: 3%;
  right: 15%;
  left: initial;
  position: fixed;
}

.home-page-sub .page-egg {
  width: 15vw;
  height: 30vh;
  left: initial;
  top: initial;
  bottom: 10%;
  right: 18%;
  position: fixed;
}

.page-egg:hover {
  cursor: pointer;
  animation-name: bounce;
  -moz-animation-name: bounce;
}
@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce-top {
  -webkit-animation: bounce-top 0.9s both;
  animation: bounce-top 0.9s both;
}
/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

.home-page-sub .target {
  width: 250px;
  height: 226px;
}

.home-page-sub .target-student {
  left: 5%;
  width: 25%;
  top: 30%;
  position: fixed;
  display: flex;
  justify-content: center;
}

.home-page-sub .student-bg {
  display: block;
  position: absolute;
  left: 10px;
  top: -20%;
  z-index: 1;
  width: 80%;
  height: 80%;
}

.student-bg {
  display: none;
}
.home-page-sub .student-container {
  position: absolute;
  right: 20%;
  bottom: -20px;
  z-index: 100;
}

.w-full {
  width: 100%;
}

.home-page-sub .target-single {
  left: 30%;
  width: 25%;
  top: 30%;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.home-page-sub .single-bg {
  display: block;
  position: absolute;
  right: 10%;
  top: 5%;
  z-index: 1;
  width: 80%;
  height: 80%;
}
.single-bg {
  display: none;
}
.home-page-sub .single-container {
  position: absolute;
  left: 0;
  bottom: -20px;
  z-index: 100;
}
.home-page-sub .target-couple {
  left: 55%;
  width: 25%;
  top: 30%;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.home-page-sub .target-infecund {
  left: 75%;
  width: 25%;
  top: 30% !important;
  position: fixed;
}

.infecund {
  height: 100%;
}

.home-page-sub .main-topic:hover .cricle-l {
  width: 1650px;
  right: -300px;
  height: 1158px;
  bottom: -656px;
}

@-webkit-keyframes scale-up-top {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
}
@keyframes scale-up-top {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
}

.target .target-tip {
  display: none;
}

.home-page-sub .target .target-name {
  display: block;
}

.home-page-sub .target .target-tip span {
  display: block;
  line-height: 26px;
  width: 100%;
}

.home-page-sub .target .target-tip {
  display: none;
  width: 150px;
  height: 100px;
  position: absolute;
  background: rgb(255, 255, 255);
  top: -50px;
  right: 20%;
  border-top-right-radius: 55px;
  border-top-left-radius: 40px;
  border-bottom-right-radius: 39px;
  border-bottom-left-radius: 40px;
  text-align: center;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
  z-index: 100;
}

.home-page-sub .target .target-tip::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 30px 7px 0;
  border-style: solid;
  border-color: #fff transparent transparent;
  position: absolute;
  bottom: -24px;
  right: 28px;
  z-index: -1;
}

.home-page-sub .target .target-tip::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 75px 30px 0px 0px;
  border-style: solid;
  border-color: #fff transparent transparent;
  position: absolute;
  bottom: -24px;
  left: 28px;
  z-index: -1;
}

.home-page-sub .target:hover .target-tip {
  display: flex;
  transition: all 1s ease;
}

.home-page-sub .target-tip-left {
  left: 0 !important;
}

.home-page-sub .btn-page-sub-close {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 92px;
  right: 140px;
  cursor: pointer;
  z-index: 10;
}
